<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { GetData, PutDetailsRedact } from '@/api/modules/vipcenterpage.ts'

const ruleFormRef = ref<FormInstance>()

const ruleForm: any = ref({
  id: 0,
  shareDesc: '',
  sharePic: '',
  noticeList: [
    {
      id: 0,
      picUrl: '',
      linkUrl: '',
      flag: 0,
    },
  ],
})

// 图片上传赋值
function handleUploadSuccess(url: string, type: string, index?: number) {
  if (url) {
    if (type === 'key') {
      ruleForm.value.sharePic = url
    }
    else {
      ruleForm.value.noticeList[index as number].picUrl = url
    }
  }
}

// 提交
async function SubmitData(formEl: FormInstance | undefined) {
  if (!formEl) {
    return
  }
  await formEl.validate((valid) => {
    if (valid) {
      PutDetailsRedact({ ...ruleForm.value }).then((res: any) => {
        if (res.statusCode === 200) {
          ElMessage.success('提交成功')
        }
        else {
          ElMessage.error(`修改失败。${res.errors}`)
        }
      })
    }
    else {
      // console.log('error submit!', fields)
      ElMessage.error('请检查表单')
    }
  })
}

// 弹窗添加
function AddNotice() {
  ruleForm.value.noticeList.push({
    id: 0,
    picUrl: '',
    linkUrl: '',
    flag: 1,
  })
}

// 弹窗删除
function DeleteNotice(index: number) {
  ElMessageBox.confirm(
    '你确定要删除这个弹窗吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      ruleForm.value.noticeList.splice(index, 1)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

onMounted(() => {
  GetData().then((res: any) => {
    if (res.statusCode === 200) {
      ruleForm.value = res.data
    }
    else {
      ElMessage.error(`获取信息失败。${res.errors}`)
    }
  })
})
</script>

<template>
  <div>
    <PageHeader title="会员中心" />
    <ElForm ref="ruleFormRef" :model="ruleForm">
      <PageMain title="分享语">
        <ElRow :gutter="10">
          <ElCol :md="8">
            <ElFormItem label="">
              <el-input v-model="ruleForm.shareDesc" placeholder="请输入分享语" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="分享图">
        <ElRow :gutter="20">
          <ElCol :md="24">
            <ElFormItem label="">
              <ImageUpload
                height="200" width="auto" :size="1"
                :url="ruleForm.sharePic" @on-success="(imgUrl) => handleUploadSuccess(imgUrl, 'key')"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="弹窗">
        <div>
          <el-button type="success" class="mb-5" @click="AddNotice">
            新增
          </el-button>
        </div>
        <el-space wrap :size="20">
          <ElRow :gutter="20">
            <ElCol v-for="(item, index) in ruleForm.noticeList" :key="item.id" :md="8" class="mb-5" style="min-width: 500px;">
              <el-card shadow="hover">
                <ElFormItem label="启用">
                  <el-switch v-model="item.flag" :active-value="1" :inactive-value="0" />
                </ElFormItem>
                <ElFormItem label="图片">
                  <ImageUpload
                    height="auto" width="160" :size="1" :url="item.picUrl" :ext="['jpg', 'png']"
                    @on-success="(imgUrl: string) => handleUploadSuccess(imgUrl, 'list', index)"
                  />
                </ElFormItem>
                <ElFormItem label="跳转地址">
                  <el-input v-model="item.linkUrl" class="max-w-xs" placeholder="请输入跳转地址" />
                </ElFormItem>
                <template #footer>
                  <div class="text-right">
                    <el-button type="danger" @click="DeleteNotice(index)">
                      删除
                    </el-button>
                  </div>
                </template>
              </el-card>
            </ElCol>
          </ElRow>
        </el-space>
      </PageMain>
    </ElForm>
    <div style="height: 90px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData(ruleFormRef)">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style scoped>
/* stylelint-disable-next-line no-empty-source */
</style>
